<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:f="http://java.sun.com/jsf/core" 
		xmlns:c="http://java.sun.com/jstl/core" 
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:a4j="http://richfaces.org/a4j"
		xmlns:rich="http://richfaces.org/rich">
		
	<ui:composition>
		<table align="left" width="100%" style="table-layout: fixed; text-align: left;">
			<tr style="background-color: #FFBF80">
				<td align="center" colspan="1" style="font-weight: bolder; font-size: 10pt;">
					Patient Details
				</td>
				<td align="center" colspan="1" style="font-weight: bolder; font-size: 10pt;">
					Photograph
				</td>
			</tr>
			<tr>				
				<td valign="top">	
						<h:panelGrid columns="2">			
							<h:outputLabel value="First Name:" />
							<h:inputText value="#{model.firstName}"/>
							<h:outputLabel value="Middle Name:" />
							<h:inputText value="#{model.middleName}"/>
							<h:outputLabel value="Last Name:" />
							<h:inputText value="#{model.lastName}"/>
							<h:outputLabel value="Address:" />
							<h:inputText value="#{model.address}"/>
							<h:outputLabel value="Sex:" />
							<h:selectOneRadio value="#{model.sex}">
												<f:selectItem itemLabel="Male" itemValue="M"/>
												<f:selectItem itemLabel="Female" itemValue="F"/>
											</h:selectOneRadio>	
							<h:outputLabel value="ID Card Type:" />
							<rich:comboBox 	value="#{model.idCardType}" 
															suggestionValues="#{idCardTypeDao.all}"
															converter="#{idCardTypeConverter}"
															enableManualInput="false"/>
							<h:outputLabel value="ID Card Number:" />
							<h:inputText value="#{model.idCardNumber}"/>
							<h:outputLabel value="Phone Number:" />
							<h:inputText value="#{model.phone}"/>
							<h:outputLabel value="Profession" />
							<rich:comboBox	value="#{model.profession}"
															suggestionValues="#{professionDao.all}"
															converter="#{professionConverter}"
															enableManualInput="false"/>									
						</h:panelGrid>
							<c:if test="#{showAddUpdateCancel}"> 
								<div class="buttonGroup" style="text-align: center;">
									<h:commandButton disabled="#{editing}" id="submit" action="#{controller['add']}" value="Add" style="padding-right:10px;"/>
									<h:commandButton disabled="#{!editing}" action="#{controller['update']}" value="Update" style="padding-right:10px;"/>
									<h:commandButton value="Cancel" action="#{controller['cancel']}" style="padding-right:10px;"/>
								</div>		
							</c:if>			
				</td>
				<td valign="top" align="center">
					<table>
						<tr>
							<td valign="top">
								<c:if test="${not editing}">								
									<a href="#" onclick="launchChildW();">								
										Click
									</a>
								</c:if>
							</td>
						</tr>
						<tr>
							<td valign="top" align="center">
								<c:choose>
									<c:when test="#{model.id gt 0}">
										<h:graphicImage url="/bss/images/saved?id=#{model.id}"/>
									</c:when>
									<c:when test="#{editing}">
										<h:graphicImage url="/bss/images/saved?id=#{model.id}"/>
									</c:when>
									<c:when test="#{not empty imageController.patientService.imageData}">
										<h:graphicImage url="/bss/images/clicked2"/>
									</c:when>
									<c:otherwise>									
										<div id='snap'>
											<img id="imgctrl" src="" width="320px" height="240px" border="1" alt="No Photograph"/>
										</div>															
									</c:otherwise>
								</c:choose>		
							</td>
						</tr>
					</table>
				</td>			
			</tr>
			<tr>
				<td colspan="2">
					<c:if test="#{showData}">
						<rich:dataTable value="#{data}" var="aBean" align="center">
							<f:facet name="header">
								<h:outputText value="All Patients"/>
							</f:facet>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="Edit" />
								</f:facet>							
								<h:commandButton title="#{editing ? 'Edit already in progress...':'Click to Edit'}" image="/resrc/images/edit1.jpg" disabled="#{editing}" 
								style="width:15px;height:15px;#{editing ? 'cursor: not-allowed':''}" action="#{controller['select']}"/>
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="Delete"/>
								</f:facet>							
								<h:commandButton title="#{editing  ? 'Edit is in progress, please complete the editing...':'Click to Delete'}" image="/resrc/images/cross1.jpg" 
									style="width:15px;height:15px;#{editing? 'cursor: not-allowed':''}" 
									disabled="#{editing}" immediate="true"  action="#{controller['delete']}"
									onclick="if(!showConfirmation('Are you sure to remove Patient #{aBean.firstName} #{aBean.middleName} #{aBean.lastName} ?')) return false;"/>
							</rich:column>
							<rich:column>
								<f:facet name="header">Name</f:facet>
								<h:outputText value="#{aBean.lastName}, #{aBean.firstName} #{aBean.middleName} "/>
							</rich:column>
							<rich:column style="text-align:center" >
								<f:facet  name="header">Photograph</f:facet>
								<h:graphicImage width="50" height="37" url="/bss/images/saved?id=#{aBean.id}"
									onmouseout="hideLarge()" style="border-width: 1px; border-style:solid; border-color:black;"
									onmouseover="showLarge(event,this,'#{request.contextPath}/bss/images/saved?id=#{aBean.id}');"/>
							</rich:column>												
							<c:if test="#{data.rowCount le 0}">
								<f:facet name="footer">
									<h:outputText value="No Patients available..." />
								</f:facet>
							</c:if>					
						</rich:dataTable>				
					</c:if>
				</td>
			</tr>		
		</table>
				
		<img id="imageEnlarged" src="" width="320" height="240" 
				alt="No Image" style="position:absolute; visibility: hidden; border-width: 2px; border-style:solid; border-color:red;"/>
				
	
	</ui:composition>	
</html>
